html,
body {
  width: 100vw;
  height: 100vh;
  /* background-color: #111; */
  position: relative;
}

body {
  overflow: hidden;
  font-smooth: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: upheavtt;
  src: url("/fonts/upheavtt.ttf");
}

@font-face {
  font-family: Cubic_11;
  src: url("/fonts/Cubic_11_1.013_R.ttf");
}

@font-face {
  font-family: fusion-chs;
  src: url("/fonts/fusion-pixel-12px-proportional-zh_hans.ttf");
}

@font-face {
  font-family: fusion-latin;
  src: url("/fonts/fusion-pixel-12px-proportional-latin.ttf");
}

@font-face {
  font-family: fusion-ja;
  src: url("/fonts/fusion-pixel-12px-proportional-ja.ttf");
}

@font-face {
  font-family: fusion-ko;
  src: url("/fonts/fusion-pixel-12px-proportional-ko.ttf");
}

.i18n-en {
  font-family: upheavtt;
}

.i18n-ja {
  font-family: upheavtt, fusion-ja;
}

.i18n-ko {
  font-family: upheavtt, fusion-ko;
}

.i18n-zh {
  font-family: upheavtt, Cubic_11, fusion-chs;
}

.i18n-fr,
.i18n-de,
.i18n-ru,
.i18n-es {
  font-family: upheavtt, fusion-latin;
}

#loading {
  user-select: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: #111;
  background-color: #fff;
  font-size: 2rem;
  inset: 0;
  z-index: 99999999;
  transition: all 1s ease-out;
}

#loading.fade-out {
  opacity: 0;
}

#app {
  width: 100%;
  height: 100%;
  min-width: 800px;
  min-height: 600px;
  overflow: hidden;
  position: relative;
  user-select: none;
  background-image: radial-gradient(#ccbebb, #433f3e);
  background-color: #fff;
}

.view {
  inset: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform .5s ease;
}

.view-container {
  width: 100%;
  height: 100%;
  position: absolute;
}

.shadowed {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
}